<script lang="ts">
	import { userIdentity } from '$lib/AniList/identity.js';
	import { user } from '$lib/AniList/user.js';
	import type { Badge } from '$lib/userBadgesDatabase.js';
	import { onMount } from 'svelte';
	// import { io } from 'socket.io-client';

	export let data;

	let editMode = false;
	let currentUserIdentity: ReturnType<typeof userIdentity>;
	let error: null | string;
	// const socket = io();
	let badges: Badge[] | null = null;

	onMount(async () => {
		// socket.on('badges', (message) => (badges = message));

		badges = await (await fetch(`/api/badges/get?id=${(await user(data.username)).id}`)).json();

		if (data.user) {
			currentUserIdentity = userIdentity(data.user);

			// socket.emit('badges', data.user);
		} else {
			currentUserIdentity = new Promise((resolve) =>
				resolve({
					name: 'Guest',
					id: -1
				})
			);
		}
	});

	const submitBadge = () => {
		const imageURL = document.querySelector('input[name="image_url"]') as HTMLInputElement;
		const activityURL = document.querySelector('input[name="activity_url"]') as HTMLInputElement;
		const description = document.querySelector('input[name="description"]') as HTMLInputElement;

		if (!imageURL.value || !activityURL.value) {
			error = 'Fields cannot be empty.';

			return;
		}

		if (!imageURL.value.startsWith('http') || !activityURL.value.startsWith('http')) {
			error = 'URLs must start with http or https.';

			return;
		}

		fetch(
			`/api/badges/add?image=${encodeURIComponent(imageURL.value)}&post=${encodeURIComponent(
				activityURL.value
			)}&description=${encodeURIComponent(description.value)}`,
			{
				method: 'POST'
			}
		).then(() => {
			error = null;
			imageURL.value = '';
			activityURL.value = '';
			description.value = '';
		});
	};

	const removeBadge = (badge: Badge) => {
		fetch(`/api/badges/remove?id=${badge.id}`, {
			method: 'POST'
		}).then(() => {
			(document.querySelector(`#badge-${badge.id}`) as HTMLAnchorElement).style.display = 'none';
		});
	};
</script>

{#await currentUserIdentity}
	Loading ...
{:then identity}
	{@const isOwner = identity && identity.name === data.username}
	<p>
		<a href={`/user/${data.username}`}>Back to Profile</a>
		{#if isOwner}
			•
			<a href={`#`} on:click={() => (editMode = !editMode)}>
				{editMode ? 'Disable' : 'Enable'} Edit Mode
			</a>
		{/if}
	</p>

	{#if editMode && isOwner}
		<p>
			Delete mode is enabled. Click on an image to delete it. There is no confirmation, so be
			careful!
		</p>

		{#if error}
			<p style="color: red;">{error}</p>
		{/if}

		<p>
			<input type="text" placeholder="Image URL" name="image_url" minlength="1" maxlength="1000" />
			<input
				type="text"
				placeholder="Activity URL"
				name="activity_url"
				minlength="1"
				maxlength="1000"
			/>
			<input
				type="text"
				placeholder="Description (Optional)"
				name="description"
				minlength="1"
				maxlength="1000"
			/>
			<a href={`#`} on:click={submitBadge}>Add Badge</a>
		</p>
	{/if}

	<div id="badges">
		{#if badges === null}
			<p>Loading&nbsp;...</p>
		{:else if badges.length === 0}
			No badges found for this user.
		{:else}
			{#each badges as badge}
				{#if editMode}
					<a href={`#`} on:click={() => removeBadge(badge)} id={`badge-${badge.id}`}>
						<img src={badge.image} alt={badge.description} />
					</a>
				{:else}
					<a href={badge.post} target="_blank" id={`badge-${badge.id}`}>
						<img src={badge.image} alt={badge.description} />
					</a>
				{/if}
			{/each}
		{/if}
	</div>
{/await}

<style>
	/* body {
		margin: 0;
		padding: 0;
		text-align: center;
		background-color: #151f2e;
	} */

	img {
		width: 100%;
		height: auto;
	}

	#badges {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
		grid-gap: 0;
	}
</style>
